<form nz-form [formGroup]="form">
  <div class="form-title">{{ 'auth.register_title' | translate }}</div>
  <nz-form-item>
    <nz-form-label [nzSpan]="24" nzFor="username">{{ 'auth.username' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="24" [nzErrorTip]="setErrorTip('username') | translate">
      <input
        nz-input name="username"
        formControlName="username" type="text"
        id="username"
        [placeholder]="'auth.username_placeholder' | translate"
      >
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="24" nzFor="password">{{ 'auth.password' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="24" [nzErrorTip]="setErrorTip('password') | translate">
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input
          [type]="passwordVisible ? 'text' : 'password'"
          nz-input name="password"
          formControlName="password"
          id="password"
          [placeholder]="'auth.password_placeholder' | translate"
        />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon class="password-eye" [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="24" nzFor="psw">{{ 'auth.psw' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="24" [nzErrorTip]="setErrorTip('psw') | translate">
      <nz-input-group [nzSuffix]="pswTemplate">
        <input
          [type]="pswVisible ? 'text' : 'password'"
          nz-input name="psw"
          formControlName="psw"
          id="psw"
          [placeholder]="'auth.psw_placeholder' | translate"
        />
      </nz-input-group>
      <ng-template #pswTemplate>
        <i nz-icon class="password-eye" [nzType]="pswVisible ? 'eye-invisible' : 'eye'" (click)="pswVisible = !pswVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <button class="login-form-margin" nz-button nzType="primary" nzBlock type="submit" (click)="onSubmit()">{{ 'auth.login_btn' | translate }}</button>
  <div class="login-tip-item">
    <a (click)="goToLogin()">{{ 'auth.register_tip_to_login' | translate }}</a>
  </div>
</form>
